css.properties.pointer-events - experimental in HTML values not bcd'ed

[estelle]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

Several values are listed as "experimental in HTML". Are these supported on HTML elements? and, if so, which browsers and since when.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

an entry for the combined support of all, painted, and visiblePainted in HTML

Did you test this? If so, how?

no

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

MDN metadata

MDN page report details

• Query: css.properties.pointer-events
• Report started: 2025-04-21T20:59:57.087Z

[caugner]

I generated this Playground to test the different values on an HTML element (<div>), an SVG graphics element (<rect>), and using CSS.supports().

Firefox Nightly 139:

"Supported pointer-events values on an HTML element (div):"
Array ["auto", "none", "visible", "painted", "fill", "stroke", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

"Supported pointer-events values on an SVG graphics element (<rect>):"
Array ["auto", "none", "visible", "painted", "fill", "stroke", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

"Supported pointer-events values according to CSS.supports():"
Array ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

Chrome 135:

"Supported pointer-events values on an HTML element (div):"
Array ["auto", "none", "visible", "painted", "fill", "stroke", "bounding-box", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

"Supported pointer-events values on an SVG graphics element (<rect>):"
Array ["auto", "none", "visible", "painted", "fill", "stroke", "bounding-box", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

"Supported pointer-events values according to CSS.supports():"
Array ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "bounding-box", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

Safari 18.4:

"Supported pointer-events values on an HTML element (div):"
Array ["auto", "none", "visible", "painted", "fill", "stroke", "bounding-box", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

"Supported pointer-events values on an SVG graphics element (<rect>):"
Array ["auto", "none", "visible", "painted", "fill", "stroke", "bounding-box", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

"Supported pointer-events values according to CSS.supports():"
Array ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "bounding-box", "all", "inherit", "initial", "revert", "revert-layer", "unset"]

What's surprising is that CSS.supports() returns true in more cases than the write and read property test case, and otherwise the results are the same except for bounding-box being supported on HTML and SVG elements in Chrome and Safari, but not in Firefox.

We can add this data, but we would need to identify in which versions support was added, and ideally verify that the feature actually works as expected. But overall, I don't think this is a high priority.